<!--
 * @Author: C.
 * @Date: 2022-06-06 09:28:14
 * @LastEditTime: 2022-08-28 16:05:47
 * @Description: file content
-->
<template>
  <div ref="jvTable" class="jv-table-style">
    <!-- 表格操作栏 -->
    <TableHeader
      :tableObj="tableObj"
      exportSourceType="editTable"
      v-if="tableObj.props.tableHeaderShow"
    >
      <div slot="subTitleBar">
        <slot name="titleBar" />
      </div>
      <div slot="subSetingBar">
        <slot name="setingBar" />
      </div>
      <slot name="btn-list" />
    </TableHeader>
    <!-- 表格主题 -->
    <div class="table-wrapper" v-clickOutside="handleClickOutside">
      <el-Table
        :id="tableObj.id"
        ref="multipleTreeEditTable"
        v-bind="{ ...$attrs, ...getBindProp }"
        style="width: 100%"
        @selection-change="handleSelectData"
        v-on="$listeners"
        @row-click="onRowClick"
        :cell-class-name="cellClassName"
        :row-class-name="rowClassName"
        
      >
        <!-- 序号 -->
        <el-table-column
          v-if="tableProps.sortCol"
          fixed
          align="center"
          type="index"
          width="50"
        />
        <!-- 开启选择框 -->
        <el-Table-column
          v-if="tableProps.chooseCol"
          fixed
          type="selection"
          width="50"
          align="center"
          :reserve-selection="!!tableObj.props.rowId"
        />
        <template v-for="item in tableObj.props.tableSchema">
          <template v-if="!item.hidden">
            <el-table-column :key="item.prop" v-bind="item" :show-overflow-tooltip="!item.IsEdit">
              <template slot-scope="scope">
                <slot
                  :name="item.prop"
                  :record="dataFilter(item.filter, scope.row[item.prop])"
                  :row_index="scope.$index"
                  :row="scope.row"
                  v-if="item.custom"
                  :cdata="item"
                  :scope="scope"
                ></slot>

                <span v-else>
                  <slot
                    :name="item.prop"
                    :record="dataFilter(item.filter, scope.row[item.prop])"
                    :row_index="scope.$index"
                    :row="scope.row"
                    v-if="item.followCustom && scope.row.IsEdit"
                    :cdata="item"
                    :scope="scope"
                  ></slot>

                  <FormItem
                    :cdata="item"
                    :form="scope.row"
                    v-else-if="scope.row.IsEdit"
                    :isEdit="false"
                    :isTreeEdit="true"
                  ></FormItem>
                  <span v-else>{{
                    item.customFilter
                      ? item.customFilter(scope.row[item.prop], scope.row)
                      : dataFilter(item.filter, scope.row[item.prop])
                  }}</span>
                </span>
              </template>
            </el-table-column>
          </template>
        </template>
        <el-table-column
          :label="$t('Generality.Ge_Operate')"
          fixed="right"
          :width="tableObj.props.operationWidth"
          align="center"
          v-if="tableObj.props.operationCol"
        >
          <template slot-scope="scope">
            <slot name="operation" :row="scope.row" :row_index="scope.$index" />
          </template>
        </el-table-column>
      </el-Table>
    </div>
  </div>
</template>

<script>
import FormItem from "../JvForm/cpn/FormItem.vue";
import { clickOutside } from "~/utils/common";
import { filterMaps } from "../../maps";
import { isModified } from "./utils";
export default {
  name: "JvTreeEditTable",
  components: {
    FormItem,
  },
  props: {
    tableObj: {
      type: Object,
    },
  },
  directives: { clickOutside },
  mounted() {
    this.tableObj.tableRef = this.$refs.multipleTreeEditTable;
  },
  data() {
    return {
      currentRow: {},
      // 被修改之前的原始数据行记录
      modifiedHistory:{

      }
    };
  },
  computed: {
    tableProps() {
      return this.tableObj.props;
    },
    getBindProp() {
      console.log(this.tableObj.props, 4546545656);
      return Object.assign(this.tableObj.props, {
        data: this.tableObj.tableData,
        rowKey: (row) => row[this.tableObj.props.rowId],
      });
    },
    dataFilter() {
      return (type = "default", data) => filterMaps[type].func(data);
    },
  },
  methods: {
    onRowClick(row, column, event) {
      
      let newRowId=row[this.tableObj.props.rowId]
      if(!this.modifiedHistory[newRowId]){
        this.modifiedHistory[newRowId]=JSON.parse(JSON.stringify(row))
      }
      this.currentRow.IsEdit = false;
      // 在切换行之前做数据对比
      this.dataComparison(this.currentRow)
      this.currentRow = row;
      // console.log(row);
      this.currentRow.IsEdit = true;
    },
    handleClickOutside(e) {
      // console.log(e, 65465456);
      // this.currentRow.IsEdit = false;
    },
    tableRowClassName({ row, rowIndex }) {
      // row.row_is_edit = false;
    },
    cellClassName({row, column, rowIndex, columnIndex}){
      // if(row.Id=="1556543533786071044"){
      //   console.log(row, column, rowIndex, columnIndex);
      // }
    },
    rowClassName({row, rowIndex}){
      if(row.modified){
        return 'row-modified'
      }
    },
    // 修改数据对比
    dataComparison(row){
      let oldRowId=row?.[this.tableObj.props.rowId]??false
      if(!oldRowId)return
      if(!this.modifiedHistory[oldRowId])return
      let sourceRow=this.modifiedHistory[oldRowId]
      // console.log(this.tableObj.getPropList,row,sourceRow);

      // if(isModified(this.tableObj.getPropList(),row,sourceRow)){
      //   row.modified=true
      // }else{
      //   row.modified=true
      // }
      row.modified=isModified(this.tableObj.getPropList(),row,sourceRow)
    },

    formBlur() {},
    handleSelectData(val) {
      const Keys = [];
      val.forEach((item) => {
        Keys.push(item[this.tableObj.props.rowId]);
      });
      Object.assign(this.tableObj.selectData, {
        keys: Keys,
        datas: val,
      });
      // console.log(this.isRadio);
      this.$emit("selectionChange", val, Keys);
    },
    // 清空选项
    clearSelection() {
      this.$refs.multipleTreeEditTable.clearSelection();
    },
  },
};
</script>

<style lang="scss">
// .cellClassName {
//   .cell {
//     display: flex;
//     .el-table__expand-icon {
//     }
//   }
// }
.row-modified{
  background: oldlace!important;
}
</style>
